<template>
	<view class="all">
		<view class="searchRoot" @click="readySearch">
			<image class="searchIcon" src="/static/images/search/searchIcon.png" mode="aspectFit"></image>
			<input
				type="text"
				:disabled="isDisabled"
				v-model="searchContent"
				:focus="isFocus"
				placeholder="搜索通讯录名称"
				class="searchTip"
				:class="{ searchModel: !isDisabled }"
			/>
			<image v-if="!isDisabled" @click.stop="changeIsDisabled" class="closeIcon" src="/static/images/close.png" mode="aspectFit"></image>
		</view>
		<!-- 索引的弹窗 -->
		<view class="mask" v-if="showPopup">
			<view class="chooseNavId">{{ chooseNavId }}</view>
		</view>
		<!-- 导航栏 -->
		<view class="navList" @touchmove.stop.prevent="touchmove" @touchend="touchend" @touchstart="touchstart">
			<view class="navOption" v-for="(item, index) in list" :key="index">{{ item.key }}</view>
		</view>
		<!-- 展示列表 -->
		<scroll-view
			class="scrollView"
			:scroll-into-view="'mailList' + chooseNavId"
			scroll-y="true"
			:style="{ height: '78vh' }"
			refresher-enabled="true"
			refresher-threshold="45"
			:refresher-triggered="refresheStatus"
			@refresherrefresh="refresherrefresh"
			@scrolltolower="loadMore"
		>
			<view :id="'mailList' + data.key" v-for="(data, key) of list" :key="key">
				<view v-if="data.main.length">
					<view>{{ data.key }}</view>
					<view class="one" v-for="(item, index) of data.main" :key="index" @click="selectPhone(item)">
						<view class="one_info">
							<text class="one_title">{{ item.name }}</text>
							<text class="info">{{ item.remark }}</text>
						</view>
						<image class="cell_icon" src="/static/images/user/kefurexian.png" mode=""></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { publicInfoData } from '@/Service/homeService.js';
import pinyin from '@/components/pinyin/web-pinyin.js';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			currentPage: 1,
			size: 100,
			total: 0,
			list: [],
			chooseOne: null,
			popupTitle: '',
			tellone: '',
			telltwo: '',
			cellPhone: '',
			refresheStatus: false, //下拉刷新状态
			//是否禁止搜索
			isDisabled: true,
			//搜索的内容
			searchContent: null,
			//选中的索引
			chooseNavId: '',
			//索引列表的总高度
			navListHeight: 0,
			//距离顶部的距离
			distanceTop: 0,
			//是否展示弹窗
			showPopup: false,
			//是否聚焦
			isFocus:false
		};
	},
	mounted() {},
	watch: {
		searchContent(value) {
			console.log(value)
			this.startSearch();
		}
	},
	methods: {
		changeIsDisabled(){
			this.isDisabled = true
			this.isFocus = false
			this.searchContent = null
		},
		touchmove(e) {
			// console.log(e.changedTouches[0].pageY, '滑动中');
			this.changeNavId(e);
		},
		touchstart(e) {
			this.showPopup = true;
			// console.log(e.changedTouches[0].pageY, '滑动开始');
		},
		touchend(e) {
			// console.log(e.changedTouches[0].pageY - this.distanceTop, '滑动结束');
			this.changeNavId(e);
			this.showPopup = false;
		},
		changeNavId(e) {
			let distance = e.changedTouches[0].pageY - this.distanceTop;
			let chooseNumber = Math.floor((distance / this.navListHeight) * this.list.length);
			while (chooseNumber < 25 && chooseNumber >= 0 && !this.list[chooseNumber].main.length) {
				chooseNumber += 1;
				if (chooseNumber >= 25) {
					break;
				}
			}
			if (chooseNumber < 0 || chooseNumber > 25) return;
			this.chooseNavId = this.list[chooseNumber].key;
		},
		//获取索引的高度
		countHeight() {
			let selectorQuery = uni.createSelectorQuery().in(this);
			selectorQuery
				.select('.navList')
				.boundingClientRect(rects => {
					console.log(rects, '获取scrollView元素的详情');
					this.navListHeight = rects.height;
					this.distanceTop = rects.top;
				})
				.exec();
		},
		//处理数据
		handlerData(list) {
			let arr = this.createNav();
			list.map(v => {
				let key = pinyin(v.name, {
					heteronym: true,
					style: pinyin.STYLE_FIRST_LETTER
				})[0][0].toUpperCase();
				v.key = key;
			});
			arr.map(v => {
				let existArr = list.filter(key => v.key === key.key);
				v.main = v.main.concat(existArr);
			});
			this.list = arr;
			setTimeout(() => {
				this.countHeight();
			}, 1000);
		},
		//创建字母的指引栏
		createNav() {
			let i = 0;
			let arr = [];
			while (i < 26) {
				let obj = {
					key: String.fromCharCode(65 + i),
					main: [],
					height: ''
				};
				arr.push(obj);
				i++;
			}
			return arr;
		},
		//开始搜索
		startSearch() {
			try {
				// if(!this.searchContent){
				// 	throw '请输入搜索的通讯录'
				// }
				this.currentPage = 1;
				// this.isDisabled = true;
				this.getPublicInfoData();
			} catch (e) {
				uni.showToast({
					icon: 'none',
					title: e
				});
			}
		},
		//用户点击搜索框
		readySearch() {
			console.log(321)
			this.isDisabled = false;
			setTimeout(()=>{
				this.isFocus = true
			},1000)
			// this.searchModel = true
		},
		selectPhone(item) {
			this.$emit('handlePhoneSelected', item);
		},
		//获取数据
		getPublicInfoData() {
			let self = this;
			let params = {
				currentPage: self.currentPage,
				size: self.size
			};
			if (self.searchContent) {
				params.content = self.searchContent;
			}
			publicInfoData(params)
				.then(ret => {
					this.handlerData(ret.data.records);
					// if(self.currentPage == 1){
					// 	self.list = []
					// }
					// self.total = ret.data.total
					// self.list.push(...ret.data.records)
				})
				.catch(err => {
					console.log(err);
				});
		},
		//下拉刷新
		refresherrefresh() {
			console.log('下拉刷新');
			this.currentPage = 1;
			this.refresheStatus = true;
			this.list = [];
			this.getPublicInfoData();
			setTimeout(() => {
				this.refresheStatus = false;
			}, 1000);
		},
		//上拉加载
		loadMore() {
			console.log('上拉加载');
			if (this.list.length < this.total) {
				this.currentPage++;
				this.getPublicInfoData();
			} else {
				console.log('没有更多数据了');
			}
		}
	}
};
</script>

<style>
page {
	font-family: Source Han Sans CN;
	background-color: #f8f8f8;
}

.all {
	padding: 20upx 30upx;
}

.one {
	background-color: #ffffff;
	border-radius: 20upx;
	padding: 25upx 30upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30upx;
}

.one_info {
	display: flex;
	flex-direction: column;
}

.one_title {
	display: block;
	font-size: 32upx;
	color: #151515;
}

.info {
	display: block;
	font-size: 26upx;
	color: #a1a8b6;
	margin-top: 12upx;
	width: 520upx;
	text-align: justify;
}

.cell_icon {
	width: 60upx;
	height: 60upx;
}
.searchRoot {
	width: 637upx;
	height: 80upx;
	background: #ffffff;
	border-radius: 40upx;
	margin-bottom: 30upx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	position: relative;
	justify-content: center;
	/* padding: 0 28upx; */
}
.searchIcon {
	width: 32upx;
	height: 32upx;
	margin-left: 16upx;
	flex-shrink: 0;
}
.searchTip {
	padding-left: 28upx;
	font-size: 28upx;
	color: #949eab;
	width: 200upx;
	transition: width 1s;
}
.searchModel {
	width: 445upx;
}
.searchBtn {
	width: 32upx;
	height: 32upx;
	padding: 24upx;
	border-radius: 50%;
	background-color: #4687ff;
}
.navList {
	position: fixed;
	right: 0;
	top: 15vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 27upx;
}
.navOption {
	padding: 0 10upx;
}
.chooseNavId {
	position: fixed;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200upx;
	height: 200upx;
	border-radius: 20upx;
	background-color: rgba(0, 0, 0, 0.3);
	font-size: 110upx;
	color: white;
	text-align: center;
	line-height: 200upx;
}
.closeIcon {
	opacity: 0.5;
	width: 32upx;
	height: 32upx;
}
/* .closeIconRoot{
	border: 1px solid #F8F8F8;
	border-radius: 50%;
} */
</style>
